import { useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import style from './navBar.module.css'

export default function NavBar() {
  const navigate = useNavigate()
  const ipt = useRef<HTMLInputElement>(null)
  return (
    <div className={style.header}>
      <div className={style.search}>
        <div className={style.icon}>
          <SearchOutline />
        </div>
        <div className={style.input}>
          <input type="text" ref={ipt} placeholder="请输入搜索关键字" />
        </div>
      </div>
      <div className={style.submit}>
        <Button color="success" size="mini" onClick={() => navigate('/search')}>
          搜索
        </Button>
      </div>
    </div>
  )
}
